<template>
    <div class="nav-header">
        <div style="width: 30%;" class="header-item">
            <span>发布</span>
            <span @click="emit('addBackImg')">添加底图</span>
            <span>锁定底图</span>
            <span>删除</span>
        </div>
        <div style="width: 30%;" class="header-item">
            <span @click="emit('addCircleHandle')">圆形</span>
            <span @click="emit('creRecthandle')">矩形</span>
            <span @click="emit('addLXHandle')">菱形</span>
            <span @click="emit('addTriangleHandle')">三角形</span>
            <span @click="emit('addMoreStyleHandle')">多边形</span>
        </div>
        <div style="width: 20%;" class="header-item">
            <span @click="emit('saveHandle')">保存</span>
            <span @click="emit('previewHandle')">预览</span>
        </div>
        <div></div>
    </div>
</template>

<script  setup>
import { defineEmits} from 'vue'
const emit = defineEmits([
    "creRecthandle",
    "addBackImg",
    "addCircleHandle",
    "addLXHandle",
    'addTriangleHandle',
    'addMoreStyleHandle',
    "previewHandle",
    'saveHandle'
])
</script>

<style lang="scss" scoped>
.nav-header {
    display: flex;
    margin-bottom: 15px;
    width: 100%;
    height: 80px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #ffffff;

    .header-item {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 100%;
        border-right: 1px solid red;
    }
}
</style>